<style  lang="scss" scoped>
  .ivu-rate-star-full span{
    color:red
  }
  .shade_fill {
    fill: rgb(158,209,139);
    fill-opacity:0;
    stroke-width:2px;
    stroke: rgb(158,209,139);
  }
  .box{
    display: flex;
    justify-content:space-between;

  }
  .c1{
    border-top-style:solid ;
    border-width:1px;
    border-right-style:solid ;
    border-color:gainsboro;
    border-width:1px;
    border-color:gainsboro;
  }
  .c2{
    border-right-style:solid ;
    border-width:1px;
  }
  h4{
    height:4vh;
    line-height: 4vh;
  }
</style>
<template>
  <div style="padding:1vh;">
  <Card >
    <div style="height: 81.5vh" ref="ele">
      <Row ref="ele2">
        <Col span="16" style="font-size:20px">查询输入</Col>

        <Col span="8">

        <Input search enter-button placeholder="输入租户名称..." @on-search="goSearch()" v-model="input_value"/>
        </Col>
      </Row>

      <Divider />


      <br/>
      <div style="text-align: center;width:100%">
        <Table border :columns="table_col" :data="table_data" :height="table_height">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button>
          </template>
        </Table>
      </div>
      <Drawer :closable="false" v-model="drawer_show" width="50">
        <template  slot="header">
          <h2>租户详情——{{select_tenant.info.tenant}}</h2>
        </template>
        <h3>租户分数对比</h3>
        <b_tenant_detail_dim ref="b_tenant_detail_dim"></b_tenant_detail_dim>
        <h3>租户运营数据</h3>
        <Row :gutter="16">
          <i-col span="12">
            <h4>资源占用</h4>
            <Row class="c1" :gutter="10">
              <i-col span="6"><span>租户申请的Hadoop、MPP资源</span></i-col>
              <i-col span="18" >
                <div class="box"><div>Hadoop存储量(T)</div><div>{{select_tenant.info.hadoop_volumn}}</div></div>
                <div class="box"><div>CPU核数</div><div>{{select_tenant.info.hadoop_cpu}}</div></div>
                <div class="box"><div>内存大小（G）</div><div>{{select_tenant.info.hadoop_raw}}</div></div>
                <div class="box"><div>MPP存储（T）</div><div>{{select_tenant.info.mpp_volumn}}</div></div>
              </i-col>
            </Row>
            <Row class="c1" :gutter="10">
              <i-col span="6">租户申请的工具服务</i-col>
              <i-col span="18">
                <div class="box"><div>数据处理工具服务</div><div>{{select_tenant.info.tool_data_process}}</div></div>
                <div class="box"><div>数据采集工具</div><div>{{select_tenant.info.tool_data_collect}}</div></div>
                <div class="box"><div>数据挖掘、机器学习工具</div><div>{{select_tenant.info.tool_data_mine}}</div></div>
                <div class="box"><div>其他（其他PaaS工具服务数量）</div><div>{{select_tenant.info.tool_else}}</div></div>
              </i-col>
            </Row>
            <Row class="c1" :gutter="10">
              <i-col span="6" >租户申请的物理资源</i-col>
              <i-col span="18" >
                <div class="box"><div>虚机数量</div><div>{{select_tenant.info.v_machine}}</div></div>
                <div class="box"><div>云服务器数量</div><div>{{select_tenant.info.cloud_machine}}</div></div>
                <div class="box"><div>存储（T）</div><div>{{select_tenant.info.cloud_volumn}}</div></div>
                <div class="box"><div>CPU核数</div><div>{{select_tenant.info.cloud_cpu}}</div></div>
                <div class="box"><div>内存（G）</div><div>{{select_tenant.info.cloud_raw}}</div></div>
              </i-col>
            </Row>
            <Row class="c1" :gutter="10">
              <i-col span="6" >租户申请的公有数据</i-col>
              <i-col span="18">
                <div class="box"><div>公有数据实体表数量</div><div>{{select_tenant.info.public_table_n}}</div></div>
                <div class="box"><div>公有数据字段数量(总字段数)</div><div>{{select_tenant.info.public_field_n}}</div></div>
                <div class="box"><div>公有数据单周期大小   （T）</div><div>{{select_tenant.info.public_cycle_volumn}}</div></div>
                <div class="box"><div>公有数据存储周期（接口机存储周期）（天）</div><div>{{select_tenant.info.public_cycle}}</div></div>
              </i-col>
            </Row>
            <Row class="c1" :gutter="10">
              <i-col span="6" >租户申请的私有数据</i-col>
              <i-col span="18">
                <div class="box"><div>私有数据实体表数量</div><div>{{select_tenant.info.private_table_n}}</div></div>
                <div class="box"><div>私有数据单周期大小   (T)</div><div>{{select_tenant.info.private_cycle_volumn}}</div></div>
                <div class="box"><div>私有数据存储周期（个周期）（天）</div><div>{{select_tenant.info.private_cycle}}</div></div>
              </i-col>
            </Row>
          </i-col>
          <i-col span="12">
            <h4>资源利用及价值意义</h4>
            <Row class="c1" :gutter="10">
              <i-col span="6" >租户资源利用率</i-col>
              <i-col span="18">
                <div class="box"><div>存储利用率</div><div>{{select_tenant.info.volumn_util}}</div></div>
                <div class="box"><div>CPU平均利用率  </div><div>{{select_tenant.info.cpu_mean_util}}</div></div>
                <div class="box"><div>CPU最大利用率</div><div>{{select_tenant.info.cpu_max_util}}</div></div>
                <div class="box"><div>CPU最小利用率</div><div>{{select_tenant.info.cpu_min_util}}</div></div>
                <div class="box"><div>内存平均利用率</div><div>{{select_tenant.info.ram_mean_util}}</div></div>
                <div class="box"><div>内存最大利用率</div><div>{{select_tenant.info.ram_max_util}}</div></div>
                <div class="box"><div>内存最小利用率</div><div>{{select_tenant.info.ram_min_util}}</div></div>
              </i-col>
            </Row>
            <Row class="c1" :gutter="10">
              <i-col span="6" >直接价值</i-col>
              <i-col span="18">
                <div class="box"><div>服务费(万元)</div><div>{{select_tenant.info.charge}}</div></div>
              </i-col>
            </Row>
            <Row class="c1" :gutter="10">
              <i-col span="6" >间接价值</i-col>
              <i-col span="18">
                <div class="box"><div>API调用次数  （次/天）</div><div>{{select_tenant.info.api_visit}}</div></div>
                <div class="box"><div>应用访问次数 （次/天）</div><div>{{select_tenant.info.app_visit}}</div></div>
              </i-col>
            </Row>
            <Row class="c1" :gutter="10">
              <i-col span="6" >创新价值</i-col>
              <i-col span="18">
                <div class="box"><div>前沿技术研究创新</div><div>{{select_tenant.info.tech_inno}}</div></div>
                <div class="box"><div>企业战略合作联合创新</div><div>{{select_tenant.info.cooperation_inno}}</div></div>
                <div class="box"><div>产生的专利(数量)</div><div>{{select_tenant.info.patent}}</div></div>
              </i-col>
            </Row>
            <Row class="c1" :gutter="10">
              <i-col span="6" >政治意义</i-col>
              <i-col span="18">
                <div class="box"><div>政府课题</div><div>{{select_tenant.info.gov_issue}}</div></div>
                <div class="box"><div>安全课题</div><div>{{select_tenant.info.sacurity_issue}}</div></div>
              </i-col>
            </Row>
            <Row class="c1" :gutter="10">
              <i-col span="6" >经济效益</i-col>
              <i-col span="18">
                <div class="box"><div>公司业务收入增长（万元）</div><div>{{select_tenant.info.income}}</div></div>
                <div class="box"><div>节约的人力及资金成本投入（万元）</div><div>{{select_tenant.info.cost_saving}}</div></div>
              </i-col>
            </Row>
            <Row class="c1" :gutter="10">
              <i-col span="6" >管理效益</i-col>
              <i-col span="18">
                <div class="box"><div>集团公司重大战略发文涉及的项目</div><div>{{select_tenant.info.company_strategic}}</div></div>
                <div class="box"><div>效率提升（%）</div><div>{{select_tenant.info.efficient}}</div></div>
                <div class="box"><div>全网应用推广复用（应用个数）</div><div>{{select_tenant.info.whole_app}}</div></div>
              </i-col>
            </Row>
          </i-col>

        </Row>
      </Drawer>
    </div>




  </Card>
  </div>
</template>

<script>
  import Axios from 'axios'
  import config from '../config.js'
  import b_tenant_detail_dim from './b_tenant_detail_dim'




  export default {
    name: "b_tenant",
    components: {
      b_tenant_detail_dim
    },
    data: function() {
      return {
        drawer_show:false,
        table_height:490,
        input_value:'',
        select_tenant:{
          info:{

          }
        },
        table_col: [
          {
            title: '租户',
            key: 'tenant'
          },
          {
            title: '资源利用',
            key: 'util_dim_score',
            sortable: true
          },
          {
            title: '资源分配',
            key: 'reason_dim_score',
            sortable: true
          },
          {
            title: '经济产值',
            key: 'economy_dim_score',
            sortable: true
          },
          {
            title: '科技产值',
            key: 'tech_dim_score',
            sortable: true
          },
          {
            title: '战略意义',
            key: 'strategy_dim_score',
            sortable: true
          },
          {
            title: '健康度',
            key: 'health',
            sortable: true
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        table_data: [
          {
            tenant: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },

        ]
      }

    },


    mounted: function() {
      this.table_height=document.body.clientHeight/100*82-130;
      this.table_data=t_data;
      this.select_tenant.info=tenant_test_data[0];

      //获取租户健康度列表数据
      this.getTenantList();
    },
    methods:{
      show(index){


        this.showDrawerData(this.table_data[index])

      },
      showDrawerData(tenant_obj){
        this.$refs.b_tenant_detail_dim.initChart(tenant_obj)
        this.drawer_show=true;
        Axios.get(config.url+'/tenant_info?tenant='+tenant_obj.tenant)
          .then(response => {
            // this.$store.state.data = response.data

            this.select_tenant.info=response.data
          })
          .catch(error => {
            console.log(error);
          });
      },
      getTenantList(){
        Axios.get(config.url+'/tenant_list')
          .then(response => {

            this.table_data=response.data

          })
          .catch(error => {
            console.log(error);
          });
      },
      goSearch(){
        //搜索租户，因为租户数少，这里的租户列表一次性也拿到所有租户了，所以这里采用遍历列表的方式
        var if_get=false;
        for(var i in this.table_data){

          if(this.table_data[i]['tenant']==this.input_value){
            this.showDrawerData(this.table_data[i]);
            this.table_data[0] = this.table_data.splice(i, 1, this.table_data[0])[0];

            if_get=true;
            break;
          }
        }
        if(if_get==false){
          this.$Notice.error({
            title: '错误',
            desc:  '租户不存在，请核对名称后重新输入！ '
          });
        }
      }

    }

  }

  let tenant_test_data=[
    {
      "tenant": "租户1",
      "hadoop_volumn": 100,
      "hadoop_cpu": 100,
      "hadoop_raw": 100,
      "mpp_volumn": 100,
      "tool_data_process": 1,
      "tool_data_collect": 1,
      "tool_data_mine": 0,
      "tool_else": 1,
      "v_machine": 0,
      "cloud_machine": 0,
      "cloud_volumn": 0,
      "cloud_cpu": 0,
      "cloud_raw": 0,
      "public_table_n": 5,
      "public_field_n": 24,
      "public_cycle_volumn": 10,
      "public_cycle": 30,
      "private_table_n": 30,
      "private_cycle_volumn": 20,
      "private_cycle": 60,
      "volumn_util": 0.3,
      "cpu_mean_util": 0.5,
      "cpu_max_util": 0.23,
      "cpu_min_util": 0.04,
      "ram_mean_util": 0.4,
      "ram_max_util": 0.9,
      "ram_min_util": 0.1,
      "charge": 0,
      "api_visit": 0,
      "app_visit": 2000,
      "tech_inno": 0,
      "cooperation_inno": 0,
      "patent": 1,
      "gov_issue": 0,
      "sacurity_issue": 0,
      "income": 0,
      "cost_saving": 0,
      "company_strategic": 0,
      "efficient": 0,
      "whole_app": 1,
      "tenant_type": 2
    }
  ]

  let t_data=[
    {
      "util_dim_score": 66.5283670720957,
      "reason_dim_score": 63.6714309224556,
      "economy_dim_score": 56.5281920824325,
      "tech_dim_score": 69.1854659493538,
      "strategy_dim_score": 60.6141562055354,
      "subject_score": 69.9001589892555,
      "object_score": 81.6481383111662,
      "health": 74.5993507180198,
      "tenant": "租户1",
      "tenant_type": 2
    },
    {
      "util_dim_score": 74.7021368174521,
      "reason_dim_score": 74.1860452923564,
      "economy_dim_score": 56.3290674513343,
      "tech_dim_score": 65.1000324969313,
      "strategy_dim_score": 63.987868344677,
      "subject_score": 70.1001993493484,
      "object_score": 74.9088349063036,
      "health": 72.0236535721305,
      "tenant": "租户2",
      "tenant_type": 1
    },
    {
      "util_dim_score": 77.9572004347924,
      "reason_dim_score": 80.1000852080345,
      "economy_dim_score": 65.1000003924249,
      "tech_dim_score": 71.3285050551781,
      "strategy_dim_score": 68.2970673332563,
      "subject_score": 70.6379301122735,
      "object_score": 82.5484594596152,
      "health": 75.4021418512102,
      "tenant": "租户3",
      "tenant_type": 0
    },
    {
      "util_dim_score": 75.6142699303866,
      "reason_dim_score": 75.0998749856071,
      "economy_dim_score": 74.9002010879393,
      "tech_dim_score": 71.3285284936089,
      "strategy_dim_score": 84.8999476347591,
      "subject_score": 69.8997730822577,
      "object_score": 90,
      "health": 77.9398638493546,
      "tenant": "租户4",
      "tenant_type": 0
    },
    {
      "util_dim_score": 71.5286013800357,
      "reason_dim_score": 71.5282356306743,
      "economy_dim_score": 64.3858139456008,
      "tech_dim_score": 74.1853240324476,
      "strategy_dim_score": 45.100396214898,
      "subject_score": 70.1001167417333,
      "object_score": 68.2131377637036,
      "health": 69.3453251505214,
      "tenant": "租户5",
      "tenant_type": 1
    },
    {
      "util_dim_score": 79.6710636659021,
      "reason_dim_score": 78.4710927465683,
      "economy_dim_score": 75.3389362343259,
      "tech_dim_score": 69.0719853228172,
      "strategy_dim_score": 60.1001552165681,
      "subject_score": 69.8997418106136,
      "object_score": 75.9965072926619,
      "health": 72.3384480034329,
      "tenant": "租户6",
      "tenant_type": 0
    },
    {
      "util_dim_score": 80.6143159319366,
      "reason_dim_score": 75.8148686797479,
      "economy_dim_score": 72.0427817300929,
      "tech_dim_score": 82.7570762620044,
      "strategy_dim_score": 67.0428051823957,
      "subject_score": 85.1000261727829,
      "object_score": 89.9071357864104,
      "health": 87.0228700182339,
      "tenant": "人力",
      "tenant_type": 2
    },
    {
      "util_dim_score": 74.8998178352203,
      "reason_dim_score": 86.3285779322505,
      "economy_dim_score": 70.6142862892831,
      "tech_dim_score": 49.6940536249693,
      "strategy_dim_score": 47.5314889438493,
      "subject_score": 84.9001990063809,
      "object_score": 86.1504276081414,
      "health": 85.4002904470851,
      "tenant": "国漫",
      "tenant_type": 2
    },
    {
      "util_dim_score": 80.6141384336644,
      "reason_dim_score": 81.3282157199625,
      "economy_dim_score": 66.3284496472104,
      "tech_dim_score": 61.5290272537823,
      "strategy_dim_score": 63.4710813546314,
      "subject_score": 84.899785170469,
      "object_score": 76.0933372153954,
      "health": 81.3772059884396,
      "tenant": "防刷单",
      "tenant_type": 2
    },
    {
      "util_dim_score": 65.1004317980346,
      "reason_dim_score": 68.6716129928943,
      "economy_dim_score": 79.8997792967509,
      "tech_dim_score": 40.1003256551448,
      "strategy_dim_score": 68.4714072520539,
      "subject_score": 43.520286493156,
      "object_score": 63.118923065939,
      "health": 51.3597411222692,
      "tenant": "西藏",
      "tenant_type": 0
    },
    {
      "util_dim_score": 64.102100254446,
      "reason_dim_score": 74.1856738449092,
      "economy_dim_score": 57.9571444057941,
      "tech_dim_score": 60.4852488820203,
      "strategy_dim_score": 68.4714796190016,
      "subject_score": 73.0799566570279,
      "object_score": 75.8022019272778,
      "health": 74.1688547651279,
      "tenant": "应用部（fms）",
      "tenant_type": 2
    }
  ]
</script>
